<template>
	<view class="wrap flex flex-ver">
		<view class="flex flex-pac">
			<text class="date">{{date.date}}</text>
		</view>
		<text class="day flex flex-pac">{{date.day}}</text>
		<text class="week flex flex-pac">{{date.week}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date:{
					date:'',
					day:'',
					week:''
				}
			}
		},
		created() {
			this.getDate()
		},
		methods: {
			getDate:function() {
				const d = new Date();
				const weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
				this.date.date = d.getFullYear() + '年' + (d.getMonth() + 1) + '月';
				this.date.day = d.getDate();
				this.date.week = weeks[d.getDay()];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		border-radius: 5rpx;
		overflow: hidden;
		width: 150rpx;
		height: 150rpx;
		background-color: #FFFFFF;
		.date {
			padding: 5rpx 0;
			font-size: 22rpx;
			display: block;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #DDDDDD;
		}
		.day {
			font-size: 60rpx;
			color: #049EF4;
		}
		.week {
			font-size: 16rpx;
		}
	}
</style>
